<!-- #ifdef H5 -->
<template>
  <view class="bottom-tabbar">
    <view 
      v-for="tab in tabs" 
      :key="tab.name" 
      class="tab-item" 
      :class="{ active: activeTab === tab.name }"
      @click="handleTabClick(tab)"
    >
      <view class="tab-icon">
        <uni-icons :type="tab.icon" :size="24" :color="activeTab === tab.name ? '#007AFF' : '#8E8E93'"></uni-icons>
      </view>
      <view class="tab-text">{{ tab.text }}</view>
    </view>
  </view>
</template>
<!-- #endif -->

// #ifdef H5
<script setup>
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'

const activeTab = ref('index')

// 导航标签配置
const tabs = [
  {
    name: 'index',
    text: '首页',
    icon: 'home',
    pagePath: '/pages/index/index',
    requireLogin: false
  },
  {
    name: 'category',
    text: '分类',
    icon: 'list',
    pagePath: '/pages/category/category',
    requireLogin: false
  },
  {
    name: 'ordered',
    text: '已点',
    icon: 'cart',
    pagePath: '/pages/ordered/ordered',
    requireLogin: true
  },
  {
    name: 'mine',
    text: '我的',
    icon: 'person',
    pagePath: '/pages/mine/mine',
    requireLogin: true
  }
]

// 检查用户登录状态
const checkLoginStatus = async () => {
  try {
    const res = await uni.getStorageSync('uni_id_token')
    return !!res
  } catch (error) {
    return false
  }
}

// 处理标签点击
const handleTabClick = async (tab) => {
  // 如果需要登录但用户未登录，跳转到登录页
  if (tab.requireLogin) {
    const isLoggedIn = await checkLoginStatus()
    if (!isLoggedIn) {
      uni.navigateTo({
        url: '/uni_modules/uni-id-pages/pages/login/login-withpwd'
      })
      return
    }
  }
  
  // 切换页面
  if (activeTab.value !== tab.name) {
    activeTab.value = tab.name
    uni.switchTab({
      url: tab.pagePath
    })
  }
}

// 页面显示时更新当前激活的标签
onShow(() => {
  const pages = getCurrentPages()
  if (pages.length > 0) {
    const currentPage = pages[pages.length - 1]
    const route = currentPage.route
    
    // 根据当前页面路由设置激活的标签
    const currentTab = tabs.find(tab => tab.pagePath.includes(route))
    if (currentTab) {
      activeTab.value = currentTab.name
    }
  }
})

// 组件挂载时设置当前激活的标签
onMounted(() => {
  const pages = getCurrentPages()
  if (pages.length > 0) {
    const currentPage = pages[pages.length - 1]
    const route = currentPage.route
    
    const currentTab = tabs.find(tab => tab.pagePath.includes(route))
    if (currentTab) {
      activeTab.value = currentTab.name
    }
  }
})
</script>
// #endif

<style lang="scss" scoped>
/* #ifdef H5 */
.bottom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #ffffff;
  border-top: 1rpx solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 999;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.06);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  transition: all 0.2s ease;
  
  &.active {
    .tab-icon {
      transform: translateY(-4rpx);
    }
    
    .tab-text {
      color: #007AFF;
      font-weight: 600;
    }
  }
  
  &:active {
    opacity: 0.7;
  }
}

.tab-icon {
  margin-bottom: 8rpx;
  transition: transform 0.2s ease;
}

.tab-text {
  font-size: 20rpx;
  color: #8E8E93;
  transition: color 0.2s ease;
}
/* #endif */
</style>